import React, { useEffect } from 'react'
import { connect } from 'react-redux'
// import { getBannerRequest } from '@/api/request'
// import { getBannerList } from '@/store/actionCreators'
import { actionCreators } from './store/index'
import { Content} from './style'
import RecommendList from '@/components/list'
import Scroll from '@/components/common/Scroll'
import Slider from '@/components/slider'
import { forceCheck } from 'react-lazyload'
import {EnterLoading} from '@/pages/Singers/style'
import Loading from '@/components/common/loading-v2/index'
function Recommend(props) {
  // let songsCount=2
  const {  banners,songsCount,recommendList,enterLoading} = props
  const { getBannerDataDispatch,getRecommendDataDispatch } =props
  useEffect(() => {
    getBannerDataDispatch()
    getRecommendDataDispatch()
  },[])

  return (
    <Content play={songsCount}>
        <Scroll className='list' onScroll={forceCheck}>
          <div>
            <Slider bannerList={banners}></Slider>
            <RecommendList recommendList={recommendList}></RecommendList>
          </div>
        </Scroll>
        {enterLoading?(<EnterLoading>
            <Loading></Loading>
        </EnterLoading>):null}
    </Content>
    
  )
}
// state 状态树
const mapStateToProps = (state) => {
  return {
    enterLoading:state.recommend.enterLoading,
    banners: state.recommend.banners,
    recommendList:state.recommend.recommendList,
    songsCount:state.player.playList.length
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    getBannerDataDispatch() {
      dispatch(actionCreators.getBannerList())
    },
    getRecommendDataDispatch() {
      dispatch(actionCreators.getRecommendList())
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Recommend)
